<!--
 * @Author: 唐锋
 * @Date: 2019-06-14 16:51:29
 * @Description:  订单首页(列表页)
 -->
 <template>
  <div class="order-list">
    <el-table :data="tableData"
      style="width: 100%"
      max-height="600">
      <el-table-column prop="orderNum"
        label="订单号"
        min-width="150">
      </el-table-column>
      <el-table-column prop="bills"
        label="账单号"
        min-width="100">
      </el-table-column>
      <el-table-column prop="hotel"
        label="酒店名称"
        min-width="150">
      </el-table-column>
      <el-table-column prop="room"
        label="房型"
        min-width="100">
        <template slot-scope="scope">
          <span>{{scope.row.room?scope.row.room:'-'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="identityCard"
        label="证件号"
        min-width="120">
        <template slot-scope="scope">
          <el-popover trigger="hover"
            placement="top"
            v-if="scope.row.identityCard">
            <p>{{scope.row.identityCard}}</p>
            <div slot="reference"
              class="name-wrapper">
              {{scope.row.identityCard}}
            </div>
          </el-popover>
          <div v-if="!scope.row.identityCard">--</div>
        </template>
      </el-table-column>
      <el-table-column prop="roomPrice"
        label="房价"
        min-width="50">
      </el-table-column>
      <el-table-column label="押金"
        min-width="100"
        prop="deposit">
      </el-table-column>
      <el-table-column label="入离时间"
        min-width="100"
        prop="startEndTime">
        <template slot-scope="scope">
          <span>{{scope.row.startEndTime ? scope.row.startEndTime.split('/')[0] : ''}}</span><br>
          <span>{{scope.row.startEndTime ? scope.row.startEndTime.split('/')[1] : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column label="房间号"
        min-width="100"
        prop="roomNum">
      </el-table-column>
      <el-table-column label="入住人"
        min-width="100"
        prop="person">
      </el-table-column>
      <el-table-column label="总消费"
        min-width="100"
        prop="moneySum">
        <template slot-scope="scope">
          <span style="color:red">￥{{scope.row.moneySum}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="state"
        label="入住状态">
        <template slot-scope="scope">
          <div type="text"
            v-if="scope.row.state == 0">待入住</div>
          <div type="text"
            v-else-if="scope.row.state == 1">入住中</div>
          <div type="text"
            v-else-if="scope.row.state == 2">待打扫房间</div>
          <div type="text"
            v-else-if="scope.row.state == 3">待账单确认</div>
          <div type="text"
            v-else-if="scope.row.state == 4">退房</div>
          <div type="text"
            v-else-if="scope.row.state == 5">用户提交结账</div>
          <div type="text"
            v-else-if="scope.row.state == 6">押金已支付</div>
          <div type="text"
            v-else-if="scope.row.state == 7">已取消</div>
        </template>
      </el-table-column>
     
    </el-table>

    <el-pagination @size-change="handleSizeChange"  class="fr"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, prev , pager , next, sizes"
      :total="total"
      style="margin-top:20px">
    </el-pagination>
  </div>
</template>
 
 <script>
import { getOrderList } from "@/api/order";
export default {
  components: {},
  props: {},
  data() {
    return {
      tableData: [],
      total:0,
      pageNo:1,
      pageSize:10
    };
  },
  watch: {},
  computed: {},
  methods: {
    /**
     * @description: 获取列表数据
     * @param
     *
     */

    _getOrderList() {
      getOrderList({
        timestamp: 0,
        version: "string",
        operation: "string",
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        dateType: "",
        startTime: "",
        endTime: "",
        state: "",
        name: null,
        search: "",
        bills: "",
        deposit: "",
        source: ""
      }).then(res => {
        console.log(res);
        this.tableData = res.data.checkInList;
        this.total = res.data.total;
      });
    },
    handleCurrentChange(pageNo){
      this.pageNo = pageNo;
      this._getOrderList();
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize;
       this._getOrderList();
    }
  },
  created() {
    this._getOrderList();
  },
  mounted() {}
};
</script>
 <style lang="scss" scoped>
.order-list {
}
</style>
